<template>
	<view>
		<z-paging-swiper>
			<view slot="top">
				<view class="bg-white u-p-r-28">
					<view>
						<u-tabs-swiper active-color="#FFCF0B" ref="uTabs" :list="balckListTab" :current="current"
							@change="tabsChange" :is-scroll="false"></u-tabs-swiper>

					</view>
				</view>
				<!-- 搜索 -->
				<view class="u-p-l-48 u-p-r-28 u-p-t-18 u-p-b-26">
					<u-search :clearabled="false" :search-icon="searchIcon" :show-action="false"
						placeholder-color="#bbb" bg-color="#fff" placeholder="请输入查询信息" v-model="keyword">
					</u-search>
				</view>

				<!-- 表头 -->
				<view
					class="border-b color-80 u-font-14 bg-white u-flex u-row-between u-p-l-28 u-p-r-28 u-p-t-22 u-p-b-12 ">
					<text class="u-flex-2">微信昵称</text>
					<text class="u-flex-6">举报理由</text>
					<text class="u-flex-1">更多</text>
				</view>

			</view>
			<!-- 滑动区域 -->
			<swiper style="height: 100%;" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">

				<swiper-item v-for="(item,index) in balckListTab" :key="index">
					<no-data v-if="dataList[index].length === 0" customClass="bg-f5"></no-data>
					<view class="content">
						<z-paging @onRefresh="onRefresh" :hide-empty-view="true" auto-show-back-to-top ref="paging"
							@query="queryList" :fixed="false" :auto="false" style="height: 100%;"
							loading-more-no-more-text="暂无更多">
							<view>

								<view style="height:60px" v-for="(item,idx) in dataList[index]" :key="idx"
									class="border-b u-flex u-p-28 bg-white">
									<view class="u-flex-2">
										<view>
											<text class="color-3 u-font-16">{{item.nickname.slice(0,1)}}**</text>
											<u-tag v-if="item.is_realname === 1" class="u-m-l-8" text="实名"
												bg-color="#FFB2AF" mode="dark" size="mini" />
										</view>
										<view>
											<text class="u-font-10 color-6">{{item.mobile}}</text>
										</view>
									</view>
									<view class="u-line-2 color-6 u-flex-6 u-font-24">
										{{item.reason}}
									</view>
									<view @click="goBlackListInfo(item)"
										class="u-flex-1 color-3 u-font-10 u-flex u-row-right">
										<text>详情</text>
										<u-icon name="arrow-right"></u-icon>
									</view>
								</view>


							</view>
						</z-paging>
					</view>
					<!-- 
					<black-list-swiper-item :keyword="keyword" :tabIndex="index" :currentIndex="swiperCurrent">
					</black-list-swiper-item> -->
				</swiper-item>
			</swiper>
		</z-paging-swiper>

		<!-- 发布按钮 -->
		<u-image @click="goBlackListAdd" class="publish-btn" src="@/static/index/add.png" width="42px" height="42px">
		</u-image>
	</view>
</template>

<script>
	import blackListSwiperItem from '@/pagesIndex/components/blackListSwiperItem/blackListSwiperItem.vue';
	import noData from '@/components/noData/noData.vue';
	import {
		getBlackList
	} from '@/api/index';
	import {
		balckListTab
	} from '@/const';

	export default {
		components: {
			blackListSwiperItem,
			noData
		},
		data() {
			return {
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				keyword: '',
				balckListTab,
				searchIcon: require('@/pagesIndex/static/search.png'),
				dataList: [],
			};
		},
		watch: {
			keyword(val) {
				this.onRefresh();
				this.queryList(1, 10);
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			onRefresh() {
				this.$set(this.dataList, this.swiperCurrent, []);
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			async queryList(page, pageSize) {
				const postData = {
					page,
					pageSize,
					keyword: this.keyword,
					// 1送养人 2领养人
					identity: this.swiperCurrent + 1
				}
				const res = await getBlackList(postData);
				const newData = res.data.list;
				this.$refs.paging[this.swiperCurrent].complete(newData);
				const oldData = this.dataList[this.swiperCurrent];
				this.$set(this.dataList, this.swiperCurrent, oldData.concat(newData));
			},
			async init() {
				const postData1 = {
					page: 1,
					pageSize: 10,
					identity: 1,
				}

				const postData2 = {
					page: 1,
					pageSize: 10,
					identity: 2,
				}
				const res1 = await getBlackList(postData1);
				const res2 = await getBlackList(postData2);
				this.dataList = [
					res1.data.list,
					res2.data.list,
				]
			},

			goBlackListAdd() {
				const access_token = uni.getStorageSync('access_token');
				if (!access_token) {
					uni.showToast({
						title: '请先登录',
						icon: "none",
						mask: true,
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500);
				} else {
					uni.navigateTo({
						url: "/pagesIndex/blackListAdd/blackListAdd"
					})
				}
			},
			goBlackListInfo(item) {
				uni.navigateTo({
					url: "/pagesIndex/blackListInfo/blackListInfo?id=" + item.id
				})
			},
		}
	}
</script>

<style lang="scss">
	.publish-btn {
		position: fixed;
		right: 14px;
		bottom: 150px;
		z-index: 1;
	}

	.content {
		height: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
	}
</style>
